<template>
  <div class="card2">
    <div class="card2-box">
      <div class="card2-ph" v-for="(imgSrc, index) in images" :key="index">
        <img :src="imgSrc" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyCard2',
  computed: {
    images() {
      const lang = this.$i18n.locale;
      if (lang === 'en') {
        return [
          require('@/assets/card2-3-EN.png'),
          require('@/assets/card2-1-EN.png'),
          require('@/assets/card2-2-EN.png'),
          require('@/assets/card2-4-EN.png')
        ];
      } else {
        return [
          require('@/assets/card2-3.png'),
          require('@/assets/card2-1.png'),
          require('@/assets/card2-2.png'),
          require('@/assets/card2-4.png')
        ];
      }
    }
  }
}
</script>

<style scoped>
.card2 {
  width: 100%;
  height: 100%;
  background: url(@/assets/background2.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2%;
}

.card2-box {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.card2-ph {
  flex: 1 1 calc(25% - 40px);
  margin: 10px;
  display: flex;
  justify-content: center;
}

.card2-ph img {
  width: 110%;
  height: auto;
  transition: transform 0.5s ease;
}

/* 选择第一个图片容器并应用特定样式 */
.card2-ph:first-child img {
  padding-top: 10px;
}
.card2-ph:hover img {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .card2-ph {
    flex: 1 1 calc(50% - 40px);
  }
}
</style>
